<template>
  <div class="header" :style="{backgroundColor:themeColor}">
    <div>
      <img
        :src="navStat?img1Close:img1Active"
        alt
        srcset
        :class="{headerImg1:navStat==false,headerImg2:navStat}"
        @click="$router.replace('/index')"
      >
      <div class="icon-header-left" @click="leftNav">
        <span class="iconfont icon-test305 icon-self-test305"></span>
      </div>
    </div>
    <div>
      <img
        src="../../../../static/images/top-icon-message.png"
        alt
        srcset
        class="header-img2"
        @click="userClickInO"
      >
      <img :src="userimg" alt srcset class="header-img3" @click="userClickIn">
    </div>
    <!-- <el-select v-model="value" placeholder="请选择" class="select-style">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>-->
    <UserInfor :class="{hideDom:hidelab}" @childByThemeColor="childByThemeColor"></UserInfor>
    <Information :class="{hideDom:hidelabefo}"></Information>
  </div>
</template>

<script>
import UserInfor from '@/components/common/userInfor/UserInfor'
import Information from '@/components/common/information/Information'
export default {
  components: {
    UserInfor, Information
  },
  props: {
    navStat: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      img1Active: require('../../../../static/images/ys-defalut-big-logo.png'),
      img1Close: require('../../../../static/images/ys-defalut-min-logo.png'),
      userimg: require('../../../../static/images/o_1bkot63pb1tdj1jt01hf01ie7d2m7.png'),
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',
      hidelab: true,
      hidelabefo: true,
      // 默认主题颜色
      themeColor: '#20ADE5'
    }
  },
  watch: {
    themeColor () {
      this.$emit('childByThemeColore', this.themeColor)
    }
  },
  methods: {
    leftNav () {
      // console.log(this.navStat, 'jhu')
      if (this.navStat) {
        this.$emit('monitorVHeader', false)
      } else {
        this.$emit('monitorVHeader', true)
      }
    },
    userClickIn () {
      this.hidelab = !this.hidelab
      this.hidelabefo = true
    },
    userClickInO () {
      this.hidelabefo = !this.hidelabefo
      this.hidelab = true
    },
    childByThemeColor (val) {
      this.themeColor = val
    }
  }
}
</script>

<style scoped lang="scss">
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 60px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.header > div {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.headerImg1 {
  margin-left: 10px;
  width: 100px;
  height: 40px;
}
.headerImg2 {
  margin-left: 10px;
  width: 50px;
  height: 40px;
}
.icon-header-left {
  margin-left: 12px;
}
.icon-self-test305 {
  width: 14px;
  height: 14px;
  color: #ffffff;
}
// .select-style:-webkit-input-placeholder {
//   font-size: 24px;
// }
// .select-style /deep/ .el-input__inner {
//   height: 30px;
// }
.header-img2 {
  width: 26px;
  height: 26px;
}
.header-img3 {
  margin: 0 12px 0 22px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.header-img3:hover,
.header-img2:hover,
.icon-header-left:hover,
.header-img1:hover {
  cursor: pointer;
}
.hideDom {
  display: none;
}
</style>
